<section id="jq">
  <div class="page-header">
    <h1>jQuery Passthrough</h1>
  </div>
  <div class="row">
    <div class="span6">
      <h3>What?</h3>

      <p>Call the jQuery function or plugin specified on the element.</p>

      <p>This example shows how to call
        <a href="http://twitter.github.com/bootstrap/javascript.html#tooltips">the bootstrap tooltip</a> with almost no work:
      </p>

      <div class="well">
        <p>
          <a title="Easiest. Binding. Ever!" ui-jq="tooltip" ui-options="{placement:'right'}">Hover over me for static Tooltip</a>
        </p>

        <p>
          <a data-original-title="{{tooltip}}" ui-jq="tooltip" ui-options="{placement:'right'}">Fill the input for a dynamic Tooltip:</a>
          <input type="text" ng-model="tooltip" placeholder="Tooltip Content">
        </p>
      </div>
    </div>
    <div class="span6">
      <h3>Why?</h3>

      <p>Not every jQuery plugin requires creating a new directive just to use it. Instead, use the pass-through directive to rapidly port functionality. It is probably the best solution for 75% of the cases you will encounter.</p>

      <p>If a plugin requires more robust integration with AngularJS then you may need to look into creating a custom directive instead, or
        <a href="https://github.com/angular-ui/angular-ui/issues?sort=created&direction=desc&state=open">contact us</a> with a request.
      </p>
    </div>
  </div>

  <h3>How?</h3>

  <p>To call something like <code>$.fn.tooltip()</code> simply do
    <code>ui-jq="tooltip"</code>. Note that the name of the function must be identical. This also works for normal jQuery commands such as
    <code>$.fn.slideUp()</code>.</p>

  <p>To pass parameters use the <code>ui-options</code> attribute. The value will be evaluated in the
    <code>$scope</code> context and passed to the function. If defaults are set, the passed options will extend them. If a string is passed, the default options will be ignored.
  </p>

  <p>Use the directive name <code>jq</code> for namespacing inside
    <code>uiJqConfig</code>. Then sub-namespace options for each function by the name of that function (exactly as it is passed to
    <code>ui-jq</code>) so that you don't have to pass options every time you call the directive.</p>
<pre class="prettyprint">
&lt;a title=&quot;Easiest. Binding. Ever!&quot; ui-jq=&quot;tooltip&quot;&gt;Hover over me for static Tooltip&lt;/a&gt;

&lt;a data-original-title=&quot;{{tooltip}}&quot; ui-jq=&quot;tooltip&quot;&gt;Fill the input for a dynamic Tooltip:&lt;/a&gt;
&lt;input type=&quot;text&quot; ng-model=&quot;tooltip&quot; placeholder=&quot;Tooltip Content&quot;&gt;

&lt;script&gt;
    myModule.value('uiJqConfig', {
        // The Tooltip namespace
        tooltip: {
             // Tooltip options. This object will be used as the defaults
            placement: 'right'
        }
    });
&lt;/script&gt;
</pre>
</section>
